<template>
	<view>
		<navBar title-text="" :isHeight="false" :isWHite="true" background="none"></navBar>
		<!--医院详情上半部分-->
		<view style="position: relative;">
			<image :src="hospital.avatar_url" mode="aspectFill" style="filter: blur(50rpx) brightness(0.8); display: block;width:100% ; height: 550rpx; overflow: hidden;"/>
		    <view :style="'position:absolute;top:'+navBarHeight+'rpx;padding-top:65rpx;overflow:hidden;width:100%;'">
				<!--转发与导航-->
				<view class="hospital-hd">
					<view class="weui-cell weui-cell_access" hover-class="weui-cell_active" @tap="showShareModal">
						<view class="weui-cell__hd">
							<image
									:src="hospital.avatar_url"
									mode="aspectFill"
									style="position: absolute; top: -65rpx; display: block; width: 150rpx; height: 135rpx; border-radius: 10rpx; overflow: hidden"
							></image>
						</view>
						<view class="weui-cell__bd" style="padding-left: 170rpx">
								<view style="position: absolute; top: -65rpx">
									<text style="font-size: 36rpx; color: #ffffff; font-weight: bold">{{ hospital.name }}</text>
								</view>
								<view>
									<text class="hosp-rank">{{ hospital.rank }}</text>
									<text class="hosp-label">{{ hospital.label }}</text>
								</view>
						</view>
						<view class="weui-cell__ft weui-cell__ft_in-access">
							<text class="f4">转发</text>
						</view>
					</view>
					<view class="weui-cell weui-cell_access" hover-class="weui-cell_active" @tap="toMap">
						<view class="weui-cell__hd">
							<image
								src="/static/resource/images/ic_address.png"
								mode="aspectFill"
								style="margin-right: 10rpx; display: block; width: 40rpx; height: 40rpx"
							></image>
						</view>
						<view class="weui-cell__bd">
							<view>
								<text style="font-size: 24rpx">{{ hospital.city }}{{ hospital.district }}{{ hospital.address }}</text>
							</view>
						</view>
						<view class="weui-cell__ft weui-cell__ft_in-access"><text class="f4">导航</text></view>
					</view>
				</view>
			<view class="hospital-bd">
				<view class="weui-cells serv-list">
					<view class="weui-cell serv-item">
						<view class="weui-cell__bd">
							<view style="padding-top: 10rpx"><text class="serv-name">在线预约您需要的服务</text></view>
						</view>
						<view class="weui-cell__ft"></view>
					</view>
					<!--@tap 是移动端的触摸事件，写成click事件也是可以的-->
					<view class="weui-cell serv-item" @tap="toService" :data-svid="item.id" v-for="(item, index) in services" :key="index">
						<!--item.use_switch == 1 代表服务已启用 ,加个block 上写v-if 这样就可以避免跟v-for 冲突使用-->
						<block v-if="item.use_switch == 1">
							<view class="weui-cell__hd">
								<image class="serv-logo" :src="item.logo_image ? item.logo_image_url : '../../resource/images/avatar.jpg'" mode="aspectFill" />
							</view>
							
							<view class="weui-cell__bd">
								<view>
									<text class="serv-name">{{ item.name }}</text>
								</view>
								<view class="serv-line serv-intro">{{ item.intro }}</view>
								<view class="serv-line">
									<text class="serv-price">{{ item.price }}</text>
									<text class="serv-unit">元/次</text>
								</view>
							</view>
							
							<view class="weui-cell__ft">
								<button class="btn1m">预约</button>
							</view>
						</block>
					</view>
				</view>
			</view>
			</view>
		</view>
		
		<!--医院详情下半部分-->
		<share :shareModal="clone_shareModal"></share>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import {onLoad} from '@dcloudio/uni-app'
	const app  =getApp()
	//医院详情数据
	const hospital = ref({})
	//服务数据
	const services = ref([])
	const clone_shareModal = ref(false)
	onLoad((options)=>{
		//加载医院详情数据
		loadHospitalDetail(options)
	})
	const navBarHeight = ref('')
	const onNavBarAttached = (e) => {
		navBarHeight.value = e.detail.navBarHeight
	}
	//转发
	const showShareModal = () => {
		clone_shareModal.value = true
	}
	
	const loadHospitalDetail = (options) => {
		app.globalData.utils.request({
			url:"/Hospital/index",
			method:"GET",
			data:{
				hid: options.hid
			},
			header: {
				token: uni.getStorageSync('token')
			},
			success:res => {
				hospital.value = res.data.hospital
				services.value = res.data.services
			},
			fail: (res) => {
				
			}
		})
	}
	
	//跳转到订单页面
	const  toService = (e) => {
		uni.navigateTo({
			url:"../service/index?svid="+e.currentTarget.dataset.svid +'&hid='+hospital.value.id
		})
	}
	
	//打开导航的功能
	const toMap = () => {
		//打开导航插件用腾讯地图插件
		const point  =  bMapTransQQMap(hospital.value.lng,hospital.value.lat)
		//qmap_key:key  es6取别名的写法
		const {qmap_key:key} = uni.getStorageSync('cfg')  //腾讯位置服务申请的key
		const referer = app.globalData.name //调用插件的app的名称
		console.log(key,"腾讯key")
		const endPoint = JSON.stringify({
			name: hospital.value.name,
			latitude: point.lat,
			longitude: point.lng
		})
		console.log(endPoint, "入参")
		// uni.navigateTo({
		// 	url: 'plugin://routePlan/index?key='+key+'&referer='+referer +'&endPoit=' + endPoit +'&navigation=1'
		// })
		
		uni.navigateTo({
		  url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
		});
	}
	
	//坐标系的计算 参数经度与纬度
	const bMapTransQQMap = (lng,lat) => {
		let x_pi = (3.141592653589793*3000) / 180;
		let x = lng - 0.0065;
		let y = lat - 0.006;
		let z = Math.sqrt(x*x + y*y) - 0.00002*Math.sin(y*x_pi)
		let theta = Math.atan2(y,x) - 0.00003 * Math.cos(x * x_pi);
		let lngs = z * Math.cos(theta);
		let lats = z * Math.sin(theta);
		return {
			lng: lngs,
			lat: lats
		}
		
	}
</script>

<style>
@import './index.css'
</style>
